<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
    <title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="module">
    import {Text, createVNode, h, render, Fragment} from "../js/runtime-dom/index.js";
    // import {
    //   Text,
    //   Fragment,
    //   createVNode,
    //   render,
    //   h,
    //   proxyRefs,
    //   toRefs,
    //   reactive,
    //   effect,
    //   watch,
    //   watchEffect,
    //   computed,
    //   ref,
    //   toRef,
    //   createRenderer,
    // } from "../../../node_modules/@vue/runtime-dom/dist/runtime-dom.esm-browser.js ";

    // const app = document.getElementById("app"); //创建app元素对象，作为游戏应用的主体内容
    // const VueComponent = {
    //   data() {
    //     return { age: 0, a: 0 };
    //   },
    //   render(proxy) {
    //     // 允许编写模板的 -> effect
    //     setTimeout(() => {
    //       proxy.age++;
    //       proxy.a++;
    //     }, 1000);
    //     return h(Fragment, [h(Text, [proxy.age, proxy.a])]);
    //   },
    // };
    // render(h(VueComponent), app);

    // props 是响应式的，但是是浅的
    // attrs 在开发环境下 是响应式， 生产环境是非响应式的
    // attrs = 用户传递props - propsOptions，自己无法消费的数据可以快速传递给其他组件
    const app = document.getElementById("app"); //创建app元素对象，作为游戏应用的主体内容
    const ChildComponent = {
        props: {
            message: String,
        },
        render(proxy) {
            return h(Text, proxy.message);
        },
    };

    const VueComponent = {
        data() {
            return {flag: 1};
        },
        props: {
            a: Object,
            b: Number,
        },
        render(proxy) {
            // 允许编写模板的 -> effect
            console.log(proxy);

            return h(Fragment, [
                h(
                    "button",
                    {onClick: () => (proxy.flag++)},
                    "更新组件"
                ),
                h(ChildComponent, {message: proxy.flag}),
            ]);
        },
    };
    render(h(VueComponent, {a: {a: 1}, b: 2, c: 1}), app);
</script>
</body>
</html>
